<template>
	<view class="mineContainer">
		<view class="headerBox flex">
			<image v-if="userInfo.headPortrait && userInfo.headPortrait!='undefined'" :src="userInfo.headPortrait"
				class="userHeadPic" @click="jumpMineInfo()"></image>
			<image v-else src="../../static/images/userHeadPic.png" class="userHeadPic" @click="jumpMineInfo()"></image>
			<view class="userInfoBox">
				<view class="userName txtOverFlow" @click="jumpMineInfo()">{{userInfo.userName}}</view>
				<view class="userState" v-if="userInfo.userState == 1">正常使用</view>
				<view class="userState" v-else>已加入黑名单</view>
			</view>
		</view>
		<view class="mineInfoBox">
			<view class="mineHeaderBox flex">
				<view class="leftLine"></view>
				<view class="mineHeaderTit">可预约实验室范围</view>
			</view>
			<view class="serviceContentBox">
				<uni-table border stripe emptyText="暂无更多数据" >
					<!-- 表头行 -->
					<uni-tr>
						<!-- <uni-th align="center">序号</uni-th> -->
						<uni-th align="center">实验室名称</uni-th>
						<uni-th align="center">审核状态</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item,index) in tableData">
						<!-- <uni-td align="center">{{index+1}}</uni-td> -->
						<uni-td align="center">{{item.laboratoryName}}</uni-td>
						<uni-td align="center">{{item.relState==0?'待审核':item.relState==1?'通过':'未通过'}}</uni-td>
					</uni-tr>
					
				</uni-table>
			</view>

		</view>


		



	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					avatarUrl: '',
					nickName: ''
				},
				userPhone: '',
				appointmentInfo: {}, //预约信息，只展示第一条
				hasAppointmentInfo: false,
				signOutMsgIds: [],
				userList:[],
				tableData:[]
				
			}
		},
		onShow() {
			this.searchUserInfo();
			this.getH5ApplyClassroomList();
		},
		onPullDownRefresh() {
			this.searchUserInfo();
			// this.searchAppointmentInfo();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			searchUserInfo() {
				let _this = this;
				this.$utils.requestFun('/member/memberSchoolUsers/api/selectMemberUserInfoByToken?route=member', {
					token: getApp().globalData.token
				}, 'GET').then(res => {
					_this.userInfo = res.data.data;
					if (res.data.data.userName && (res.data.data.userName == res.data.data.mobilePhone)) {
						uni.getStorage({
							key: 'userInfo',
							success: function(res) {
								_this.userInfo.userName = res.data.nickName;
							}
						});
					}
				})
			},
			getH5ApplyClassroomList(){
				let _this = this;
				_this.$utils.requestFun('/stadium/memberClassroomRel/api/getH5ApplyClassroomList', {
					token: getApp().globalData.token
				}, 'GET').then(res => {
					_this.tableData = res?.data?.data??[]
				});
			}
			
		}
	}
</script>
<style scoped >
	/deep/.uni-popup .uni-popup__wrapper {
	    width: 90% !important;
	    padding: 40rpx;
	}
</style>
<style>
	.mineContainer {
		width: 100%;
		/* height: 100vh; */
		background: #F6F6F6;
		padding-bottom: 20rpx;
	}

	.txtOverFlow {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.flex {
		display: flex;
	}
	.inputBox2 {
	
		border: 1px solid #efefef;
		border-radius: 10px;
		margin: 0 auto;
		padding: 10px 0 10px 10px;
		margin-bottom: 10px;
	}
	.inputBox {
		margin-left: 26rpx;
	}
	
	.moreIcon3 {
		width: 66rpx;
		height: 16rpx;
		position: absolute;
		right: 20px;
		top: 40%;
	}
	
	
	.selectSchoolBox {
		width: 85%;
		height: 30rpx;
		line-height: 30rpx;
		margin: 80rpx 45rpx 45rpx 45rpx;
		/* background: #F6F6F6;
		border-radius: 49rpx; */
	}

	.headerBox {
		width: 100%;
		height: 230rpx;
		padding-top: 47rpx;
		background-image: url("https://t.acoer.cn/guoshiBgImg/indexHeadBg.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.userHeadPic {
		width: 160rpx;
		height: 158rpx;
		border-radius: 50%;
		margin-left: 26rpx;
		margin-right: 28rpx;
	}

	.userInfoBox {
		width: 62%;
	}

	.userName {
		font-size: 40rpx;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 39rpx;
		margin-top: 32rpx;
	}

	.userState {
		min-width: 118rpx;
		height: 48rpx;
		display: inline-flex;
		margin-top: 21rpx;
		background: #61d2a5;
		border-radius: 24rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 48rpx;
		padding-left: 22rpx;
	}

	.setIcon {
		width: 36rpx;
		height: 36rpx;
	}

	.mineInfoBox {
		width: 100%;
		/* height: 800rpx; */
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		margin-top: -24px;
		background: #F6F6F6;
	}

	.mineHeaderBox {
		clear: both;
		line-height: 30rpx;
		padding: 49rpx 20rpx 23rpx 20rpx;
	}

	.leftLine {
		width: 8rpx;
		height: 30rpx;
		background: #19AD78;
		border-radius: 4rpx;
	}

	.mineHeaderLeft {
		width: 81.5%;
	}

	.mineHeaderTit {
		font-size: 34rpx;
		font-weight: bold;
		color: #222222;
		margin-left: 10rpx;
		width: 70%;
	}

	.mineHeaderRight {
		font-size: 24rpx;
		color: #999999;
	}

	.moreIconHui {
		width: 21rpx;
		height: 21rpx;
		margin-left: 6rpx;
		margin-top: 6rpx;
	}

	.yuyueListBox {
		width: 88%;
		min-height: 168rpx;
		background-color: #FFFFFF;
		padding: 10rpx 20rpx;
		margin: 24rpx;
		margin-bottom: 0px;
		border-radius: 20rpx;
	}

	.yuyueHeaderBox {
		width: 100%;
		line-height: 79rpx;
		border-bottom: 1px solid #EEEEEE;
	}

	.classRoomIcon {
		width: 25rpx;
		height: 25rpx;
		margin-right: 15rpx;
		margin-top: 28rpx;
	}

	.yuyueTit {
		font-size: 28rpx;
		font-weight: bold;
		color: #222222;
		width: 40%;
	}

	.yuyueTime {
		font-size: 26rpx;
		color: #222222;
		width: 30%;
	}

	.yuyueTimeListBox {
		width: 100%;
		margin-top: 30rpx;
	}

	.yuyueTimeItem {
		width: 200rpx;
		height: 80rpx;
		background-color: #F6F6F6;
		font-size: 28rpx;
		color: #222222;
		line-height: 80rpx;
		text-align: center;
		border-radius: 10rpx;
		float: left;
		margin-right: 20rpx;
		margin-bottom: 18rpx;
	}

	.locationBox {
		width: 100%;
		font-size: 28rpx;
		color: #666666;
		margin-top: 30rpx;
	}

	.locationIcon {
		width: 27rpx;
		height: 27rpx;
		margin-right: 13rpx;
		margin-top: 8rpx;
	}

	.serviceBox {
		width: 94%;
		height: 190rpx;
		margin: 24rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
	}

	.serviceItem {
		width: 18%;
		margin-top: 47rpx;
		margin-left: 39rpx;
		text-align: center;
		float: left;
	}

	.serviceContentBox {
		/* width: 94%; */
		/* height: 380rpx; */
		margin: 24rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 20rpx;
		/* justify-content: center; */
	}

	.serviceeContentItem {
		width: 18%;
		margin-top: 47rpx;
		margin-left: 39rpx;
		text-align: center;

		/* float: left; */
	}

	.serviceIcon {
		width: 50rpx;
		height: 50rpx;
		display: block;
		margin: 0 auto;
		margin-bottom: 19rpx;
	}

	.serviceTxt {
		font-size: 24rpx;
		color: #222222;
	}

	.mineInfoBottom {
		margin-top: 70rpx;
		/* position: absolute;
		bottom: -70px; */
		width: 100%;
	}

	.mineInfoBottom-item {
		font-size: 24rpx;
		color: #999999;
		line-height: 39rpx;
		text-align: center;
	}

	.appointmentInfoBtn {
		width: 25%;
		height: 65rpx;
		background: linear-gradient(90deg, #19AD78, #1EBE85);
		border-radius: 30rpx;
		line-height: 65rpx;
		display: block;
		margin: 0 auto;
		font-size: 25rpx;
		color: #FFFFFF;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		text-align: center;
	}

	.popBox {
		width: 84%;
		margin-left: 4%;
		border-radius: 20rpx;
		padding: 40rpx 30rpx;
		background: #FFFFFF;
	}
	
	.classroomPopBox {
		border-radius: 20rpx;
		padding: 40rpx 30rpx;
		background: #FFFFFF;
	}

	.popTextArea {
		border: 1px solid #bbb;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		padding: 20rpx;
		width: 95%;
	}

	.popBtn {
		width: 180rpx;
		height: 60rpx;
		line-height: 60rpx;
		background: linear-gradient(90deg, #19AD78, #1EBE85);
		border-radius: 30rpx;
		text-align: center;
		font-size: 26rpx;
		color: #FFFFFF;
	}

	.popTitle {
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
	}

	.radioLabel {
		line-height: 46rpx;
		margin-bottom: 20px;
		font-size: 30rpx;
		float: left;
		width: 90%;
	}

	.uni-radio-input.uni-radio-input-checked {
		font: normal normal normal 14px/1 uni;
		font-size: 14px;
		content: " " !important;
		color: #fff;
		font-size: 18px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -48%) scale(.73);
		-webkit-transform: translate(-50%, -48%) scale(.73);
	}
</style>
